<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="搜索"
      left-arrow
      @click-left="back"
    />
    <div class="tip">
      <input
        type="text"
        v-model="content"
        placeholder="请输入小区名称、街道、商圈等"
      />
      <span @click="getsearch">搜索</span>
    </div>
    <van-tabs
      @change="showchange"
      class="tabx"
      v-model="houseCate"
      title-active-color="#45b7cb"
      color="#45b7cb"
    >
      <van-tab name="1" title="租房"> </van-tab>
      <van-tab name="2" title="二手房"> </van-tab>
      <van-tab name="3" title="新房"> </van-tab>
    </van-tabs>
    <div class="showtip">
      <span>历史记录</span>
      <span @click="clear">清除记录</span>
    </div>
    <div class="history">
      <span
        v-for="(item, index) in historyList"
        :key="index"
        @click="goSearchDetail(item)"
        >{{ item }}</span
      >
    </div>
    <div class="housepart">
      <div
        v-show="houseCate == 1"
        @click="jumptodetail(item.roomId, item)"
        v-for="item in houselist"
        :key="item.index"
        class="house1"
      >
        <img :src="item.image" alt="" />
        <div class="intrduce">
          <span class="title1">{{ item.subdistrict }}</span>
          <span class="title2"
            ><span>{{ item.rentalWay }}</span
            >|<span>{{ item.houseType }}</span
            >|<span>{{ item.roomAcre }}</span
            >|<span>{{ item.floor }}</span></span
          >
          <span v-show="item.distance" class="title2"
            ><van-icon name="location" />{{ item.distance }}</span
          >
          <div class="tips">
            <span>{{ item.rentalWay }}</span>
            <span>{{ item.paymentMethod }}</span>
            <span>{{ item.houseType }}</span>
          </div>
          <span class="title3">{{ item.price }}</span>
        </div>
      </div>
      <div
        @click="jumptobuydetail(item.houseId, item)"
        v-for="(item, index) in houselist"
        :key="index"
        class="house2"
        v-show="houseCate == 2"
      >
        <img :src="item.houseImage" />
        <div class="intrduce">
          <div class="title1">{{ item.subdistrict }}</div>
          <div class="title2">
            <span>{{ item.houseType }}</span
            >|<span>{{ item.coveredArea }}m<span class="up">2</span></span
            >|<span>{{ item.floor }}</span>
          </div>
          <div class="tips">
            <span v-show="item.aspectType">{{ item.aspectType }}</span>
            <span v-show="item.decoration">{{ item.decoration }}</span>
            <span v-show="item.houseGenre">{{ item.houseGenre }}</span>
          </div>
          <div v-show="item.listedPrice != '面议'" class="title3">
            {{ item.listedPrice }}万<span>
              <span
                >{{
                  ((item.listedPrice * 10000) / item.coveredArea).toFixed(2)
                }} </span
              >元/m<span class="up">2</span></span
            >
          </div>
          <div v-show="item.listedPrice == '面议'" class="title3">
            {{ item.listedPrice }}
          </div>
        </div>
      </div>
      <div v-show="shownohouse" class="nohouse">
        <img src="../../assets/nohouse.png" alt="" />
        <div>很抱歉~没有找到任何房源</div>
      </div>
      <div
        v-show="houseCate == 3"
        @click="jumptonewdetail(item.houseId, item)"
        v-for="item in houselist"
        :key="item.index"
        class="house3"
      >
        <img :src="item.image" alt="" />
        <div class="intrduce">
          <span class="title1">{{ item.subdistrict }}</span>
          <span class="title2">
            <span>年限:{{ item.propertyTerm }}</span>
            <span v-show="item.plotRatio">容积率:{{ item.plotRatio }}</span>
            <span v-show="item.greeningRate"
              >绿化率:{{ item.greeningRate }}</span
            >
          </span>
          <span class="tips">
            <span v-for="i in item.houseLabel" :key="i.index">{{ i }}</span>
          </span>
          <span class="title3">{{ item.sellingPrice }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  vaguesearch,
  buyvaguesearch,
  newvaguesearch,
} from "../../apis/house.js";
import local from "../../utils/local.js";
import { _local } from "@/utils/storage";
import { addLog } from "@/apis/user";

export default {
  data() {
    return {
      time: 0,
      timer: "",
      content: "",
      historyList: [],
      houseCate: 1,
      houselist: [],
      currentPage: 1,
      perPage: 10,
      item: "",
      shownohouse: false,
      loading: false,
      cityCode: "",
    };
  },
  created() {
    if (JSON.parse(local.get("historyList"))) {
      this.historyList = JSON.parse(local.get("historyList"));
    }
    this.cityCode = _local.get("cityCode");
    console.log(this.cityCode);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    jumptodetail(e, item) {
      // let list = JSON.parse(local.get("todayhouselist"));
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].roomId == item.roomId) {
      //     list.splice(i, 1);
      //   }
      // }
      // list.unshift(item);
      // local.set("todayhouselist", JSON.stringify(list));
      // local.set("roomId", e);
      this.$router.push({ path: "/housedetail", query: { roomId: e } });
    },
    jumptobuydetail(e, item) {
      // let list = JSON.parse(local.get("todaybuyhouselist"));
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].houseId == item.houseId) {
      //     list.splice(i, 1);
      //   }
      // }
      // list.unshift(item);
      // local.set("todaybuyhouselist", JSON.stringify(list));
      // local.set("houseId", e);
      this.$router.push({ path: "/buyhousedetail", query: { houseId: e } });
    },
    jumptonewdetail(e, item) {
      // let list = JSON.parse(local.get("todaynewhouselist"));
      // for (let i = 0; i < list.length; i++) {
      //   if (list[i].houseId == item.houseId) {
      //     list.splice(i, 1);
      //   }
      // }
      // list.unshift(item);
      // local.set("todaynewhouselist", JSON.stringify(list));
      // local.set("newhouseId", e);
      this.$router.push({ path: "/newhousedetail", query: { newHouseId: e } });
    },
    houseSearch() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      vaguesearch({
        content: this.content,
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        if (res.code == 200 || res.code == 201) {
          this.$toast.clear();
          if (res.result.list.length == 0) {
            this.shownohouse = true;
          } else if (res.result.list.length == 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    },
    buyhouseSearch() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      buyvaguesearch({
        content: this.content,
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        if (res.code == 200 || res.code == 201) {
          this.$toast.clear();
          if (res.result.list.length == 0) {
            this.shownohouse = true;
          } else if (res.result.list.length == 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    },
    newhouseSearch() {
      this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      newvaguesearch({
        content: this.content,
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        if (res.code == 200 || res.code == 201) {
          this.$toast.clear()
          if (res.result.list.length == 0) {
            this.shownohouse = true;
          } else if (res.result.list.length == 10) {
            this.loading = true;
          }
          this.houselist = res.result.list;
        }
      });
    },
    getsearch() {
      if (this.content == "") {
        this.$toast("请输入搜索内容");
        return false;
      } else {
        addLog({
          adcode: _local.get("adCode"),
          code: "click",
          page_name: "搜索页",
          system: _local.get("device"),
          uid: _local.get("ryId"),
          time: this.time,
          describe: `关键字:${this.content},城市:${_local.get("city")}`,
        }).then((res) => {});
        if (!this.historyList.includes(this.content)) {
          this.historyList.unshift(this.content);
          local.set("historyList", JSON.stringify(this.historyList));
          if (this.houseCate == 1) {
            this.houseSearch();
          } else if (this.houseCate == 2) {
            this.buyhouseSearch();
          } else if (this.houseCate == 3) {
            this.newhouseSearch();
          }
        } else {
          let i = this.historyList.indexOf(this.content);
          this.historyList.splice(i, 1);
          this.historyList.unshift(this.content);
          local.set("historyList", JSON.stringify(this.historyList));
          if (this.houseCate == 1) {
            this.houseSearch();
          } else if (this.houseCate == 2) {
            this.buyhouseSearch();
          } else if (this.houseCate == 3) {
            this.newhouseSearch();
          }
        }
      }
    },
    goSearchDetail(item) {
      if (!this.historyList.includes(item)) {
        this.historyList.unshift(item);
        local.set("historyList", JSON.stringify(this.historyList));
        this.content = item;
        if (this.houseCate == 1) {
          this.houseSearch();
        } else if (this.houseCate == 2) {
          this.buyhouseSearch();
        } else if (this.houseCate == 3) {
          this.newhouseSearch();
        }
      } else {
        let i = this.historyList.indexOf(item);
        this.historyList.splice(i, 1);
        this.historyList.unshift(item);
        local.set("historyList", JSON.stringify(this.historyList));
        this.content = item;
        if (this.houseCate == 1) {
          this.houseSearch();
        } else if (this.houseCate == 2) {
          this.buyhouseSearch();
        } else if (this.houseCate == 3) {
          this.newhouseSearch();
        }
      }
    },
    clear() {
      this.$toast.success("清空历史搜索成功");
      local.del("historyList");
      this.historyList = [];
    },
    showchange() {
      this.houselist = [];
      this.content = "";
      this.currentPage = 1;
      this.shownohouse = false;
    },
    showScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;
        if (this.houseCate == 1) {
          vaguesearch({
            houseCate: this.houseCate,
            content: this.content,
            currentPage: this.currentPage,
            perPage: this.perPage,
            cityCode: this.cityCode,
          }).then((res) => {
            if (res.code == 201) {
              if (res.result.list.length != 10) {
                this.loading = false;
              }
              this.houselist = [...this.houselist, ...res.result.list];
            }
          });
        } else if (this.houseCate == 2) {
          buyvaguesearch({
            houseCate: this.houseCate,
            content: this.content,
            currentPage: this.currentPage,
            perPage: this.perPage,
            cityCode: this.cityCode,
          }).then((res) => {
            if (res.code == 201) {
              if (res.result.list.length != 10) {
                this.loading = false;
              }
              this.houselist = [...this.houselist, ...res.result.list];
            }
          });
        } else if (this.houseCate == 3) {
          newvaguesearch({
            houseCate: this.houseCate,
            content: this.content,
            currentPage: this.currentPage,
            perPage: this.perPage,
            cityCode: this.cityCode,
          }).then((res) => {
            if (res.code == 201) {
              if (res.result.list.length != 10) {
                this.loading = false;
              }
              this.houselist = [...this.houselist, ...res.result.list];
            }
          });
        }
      }
    },
    getTime() {
      this.timer = setInterval(() => {
        this.time++;
      }, 1000);
    },
  },
  mounted() {
    this.getTime();
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    clearInterval(this.timer);
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
.tabx {
  margin: 20px 40px 10px;
  .van-tab__pane {
    margin-top: 10px;
  }
}
.tip {
  text-align: center;
  margin-top: 5px;
  input {
    width: 70%;
    padding: 8px 15px;
    border-radius: 15px;
    font-size: 13px;
    border: 1px solid #45b7cd;
  }
  span {
    margin-left: 10px;
    font-size: 14px;
    color: #45b7cd;
  }
}
.showtip {
  margin: 0 15px;
  padding-top: 20px;
  span {
    &:first-child {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
    &:last-child {
      color: #777;
      font-size: 14px;
      float: right;
    }
  }
}
.history {
  margin: 20px 15px;
  font-size: 14px;
  span {
    display: inline-block;
    padding: 8px 15px;
    background-color: #eee;
    border-radius: 15px;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.house1 {
  display: flex;
  margin: 10px 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 2px;
        background-color: #ebfafd;
        color: #4daac1;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
}
.house2 {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.house3 {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 120px;
    height: 110px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    width: 190px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 0px 2px;
        border: 1px solid #45b7cb;
        color: #45b7cb;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
  .up {
    margin: 0px !important;
    font-size: 12px;
    vertical-align: super;
    transform: scale(calc(10 / 12));
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>